<template>
  <ul>
    <li v-for="(item, index) in list" :key="index" class="steps-li">
      <div class="icon">
        <van-icon :name="calIcon(item, index).name" :color="calIcon(item, index).color" size="30" />
      </div>
      <div class="steps-text" :style="{color:calIcon(item, index).color}">{{ item.nodeName }}</div>
    </li>
  </ul>
</template>

<script>
export default {
  name: "commonSteps",
  components: {},
  data() {
    return {
      list: [],
      currentIndex: 0,
    };
  },
  props: {
    // 横向horizontal和 竖向vertical
    direction: {
      require: false,
      default: "horizontal",
    },
    // 当前节点
    currentNode: {
      require: true,
      type: Object,
      default() {
        return {};
      },
    },
    // 流程节点
    stepsList: {
      type: Array,
      require: true,
      default: () => {
        return [
          {
            title: "标题",
            content: "内容",
          },
          {
            title: "标题",
            content: "内容",
          },
          {
            title: "标题",
            content: "内容",
          },
        ];
      },
    },
    activeColor: {
      type: String,
    },
    activeIcon: {
      type: String,
      default: "",
    },
    
  },
  mounted() {
    this.calStepList();
  },
  methods: {
    calIcon(item, index) {
      if (item.isCurrent === false) {
        if (index < this.currentIndex) {
          return { name: "passed", color: "blue" };
        }
        return { name: "clock-o", color: "#999" };
      }
      if (item.isCurrent === true) {
        if (this.currentNode.status == 1) {
          return { name: "passed", color: "blue" };
        }
        return { name: "close", color: "red" };
      }
    },
    calStepList() {
      let list = [];
      this.stepsList.map((item, index) => {
        if (item.id == this.currentNode.processNodeIdFrom) {
          this.currentIndex = index;
        }
        list.push({
          nodeName: item.nodeName,
          isCurrent: item.id == this.currentNode.processNodeIdFrom,
        });
      });
      this.list = list;
    },
  },
};
</script>
<style lang="less" scoped>
.steps-li {
  display: flex;
  align-items: center;
  padding: 20px;
  position: relative;
}
.steps-li:before {
  content: "";
  width: 30px;
  height: 50px;
  border-right: 1px solid #aaa;
  position: absolute;
  left: 20px;
  top: -22px;
}
.steps-li:first-child:before {
  border-right: none;
}
.steps-text {
  font-size: 30px;
  text-align: left;
  margin-left: 10px;
}
</style>
